<template>
  <div class="box" id="tmailpro">
    <div class="header">
      <div class="leftbtn">
        <div style="min-width:400px;height: 30px;display: inline-block;">
          <el-form
            :inline="true"
            :model="search"
            size="small"
            style="height: 30px;line-height: 30px;"
          >
            <el-form-item label="关键字:">
              <el-input
                v-model.trim="keywords"
                placeholder="请输入查询标题"
                style="margin-top: 1px;width: 180px;"
                @keyup.enter.native="searchCom"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <e-button class="operatBtnMiddle" @click="searchCom">查询商品</e-button>
              <e-button class="operatBtnMiddle" @click="refreshCom">刷新商品</e-button>
              <!-- 关联物料 -->
              <el-dialog title="选择关联" :visible.sync="dialogTableVisible" v-dialogDrag width="70%">
                <div class="mdialog">
                  <el-col
                    :span="3"
                    ref="materielTypeBox"
                    class="left-sider"
                    style="overflow: auto;"
                  >
                    <div style="margin-left: 20px;">
                      <el-tree
                        :data="typeAllDate"
                        :props="defaultProps"
                        node-key="id"
                        empty-text="没有数据"
                        :expand-on-click-node="false"
                        :default-expanded-keys="defaultExpandedKeys"
                        @node-drag-start="handleTypeDragStart"
                        @node-drag-enter="handleTypeDragEnter"
                        @node-drag-leave="handleTypeDragLeave"
                        @node-drag-over="handleTypeDragOver"
                        @node-drag-end="handleTypeDragEnd"
                        @node-drop="handleTypeDrop"
                        draggable
                        :allow-drop="allowTypeDrop"
                        :allow-drag="allowTypeDrag"
                      >
                        <span
                          class="custom-tree-node"
                          slot-scope="{ node, data }"
                          style="height: 100%;line-height: 100%;width: 100%;"
                        >
                          <span
                            @click.stop="nodeClick(node.data)"
                            style="padding: 7px 0;"
                          >{{ node.label }}</span>
                        </span>
                      </el-tree>
                    </div>
                  </el-col>
                  <el-col :span="21" ref="materielBox" class="right-content">
                    <div class="operatBtnWrapper" style="height: 30px;padding: 10px 0 10px 8px;">
                      <div style="min-width:400px;height: 30px;display: inline-block;">
                        <el-form
                          :inline="true"
                          :model="search"
                          size="small"
                          style="height: 30px;line-height: 30px;display: inline-block;"
                        >
                          <el-form-item label="关键字:">
                            <el-input
                              v-model.trim="keywords"
                              placeholder="编号 名称 规格 品牌 备注"
                              style="margin-top: 1px;width: 180px;"
                            ></el-input>
                          </el-form-item>
                          <el-form-item>
                            <e-button class="operatBtnMiddle">查询</e-button>
                            <e-button class="operatBtnMiddle">刷新</e-button>
                          </el-form-item>
                        </el-form>
                      </div>
                    </div>
                    <div>
                      <el-table :data="mtableData" border style="width: 100%" height="430" >
                        <el-table-column
                          align="center"
                          prop="chenkall"
                          label="全选"
                          width="60"
                          type="selection"
                          
                          class="mtable"
                        ></el-table-column>
                        <el-table-column
                          property="materiel_num"
                          align="center"
                          label="数量"
                          width="150"
                        >
                          <template slot-scope="scope">
                            <div class="div_number">
                              <el-input-number v-model='scope.row.materiel_num'  :min="1" size="mini" :step="1"></el-input-number>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column align="center" property="materiel_type_id" label="类别"></el-table-column>
                        <el-table-column align="center" property="materiel_no" label="编号"></el-table-column>
                        <el-table-column align="center" property="materiel_state_out" label="状态"></el-table-column>
                        <el-table-column align="center" property="materiel_name" label="名称"></el-table-column>
                        <el-table-column
                          align="center"
                          property="materiel_spec"
                          label="规格"
                          width="120"
                        ></el-table-column>
                        <el-table-column align="center" property="materiel_unit" label="单位"></el-table-column>
                        <el-table-column align="center" property="create_user" label="创建人"></el-table-column>
                        <el-table-column align="center" property="create_time" label="创建时间"></el-table-column>
                      </el-table>
                    </div>
                    <div class="mblock">
                      <el-pagination
                        @size-change="handleMaterielPage"
                        @current-change=" handleMaterielChange"
                        :current-page="materielPage"
                        :page-sizes="materielSizes"
                        :page-size="materielSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalMateriel"
                      ></el-pagination>
                    </div>
                  </el-col>
                  <div class="mbtn">
                    <el-button class="operatBtnMiddle" @click="saveQuit">取消</el-button>
                    <el-button class="operatBtnMiddle" @click="saveQuit">保存并退出</el-button>
                  </div>
                </div>
              </el-dialog>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="tmail">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="selectionChange"
        class="el-table__body"
      >
        <!-- <el-table-column align="center" prop="chenkall" label="全选" width="70px" type="selection"></el-table-column> -->
        <el-table-column align="center" prop="pro_proid" label="天猫产品ID"></el-table-column>
        <el-table-column align="center" prop="pro_title" label="标题" width="180">
          <template slot-scope="scope">
            <p
              @click="getCommodityDetail(scope.row.pro_proid)"
              class="pro_info"
            >{{scope.row.pro_title}}</p>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" prop="pro_pic" label="图片" width="100">
          <template slot-scope="scope">
            <img :src="scope.row.pro_pic" width="80">
          </template>
        </el-table-column>-->
        <el-table-column align="center" prop="pro_skuid" label="skuID"></el-table-column>
        <el-table-column align="center" prop="pro_skuname" label="sku名称">
          <template slot-scope="scope">
            <div>
              <span>{{scope.row.pro_skuname}}</span>
              <span
                style="cursor:pointer;
                position:absolute;right:2px;"
                title="修改SKU名称"
                class="marR15"
                @click="open(scope.row.pro_skuid,scope.row.pro_skuname)"
              >
                <icon name="change" class="scaleIcon1"></icon>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="pro_color" label="颜色分类"></el-table-column>
        <el-table-column align="center" prop="pro_price" label="价格"></el-table-column>
        <el-table-column
          align="center"
          prop="pro_status"
          label="状态"
          width="180"
          :filters="[{ text: '出售中', value: '出售中' }, { text: '未上架', value: '未上架' }]"
          :filter-method="filterTag"
        >
          <template slot-scope="scope">
            <span
              type="text"
              size="medium"
              :class="getClass(scope.row.pro_status)"
            >{{scope.row.pro_status}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="pro_time" label="上架时间"></el-table-column>

        <el-table-column
          align="center"
          prop="pro_map"
          label="是否关联"
          :filters="[{ text: '已关联', value: '已关联' }, { text: '未关联', value: '未关联' }]"
          :filter-method="filterTag"
        >
          <template slot-scope="scope">
            <span
              type="text"
              size="medium"
              :class="getClass(scope.row.pro_map)"
            >{{scope.row.pro_map}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="pro_map" label="映射关系">
          <template slot-scope="scope">
            <el-button type="text" size="medium" @click="lookover(scope.$index, scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="pro_operation" label="操作">
          <template slot-scope="scope">
            <div>
              <span
                title="关联物料"
                style="cursor:pointer;"
                class="marR15"
                @click="addmap"
                v-if="materielShow"
              >
                <icon name="add" class="scaleIcon1 svgColor"></icon>
              </span>
              <span title="修改物料" style="cursor:pointer;" class="marR15" @click="addmap" v-else>
                <icon name="change" class="scaleIcon1"></icon>
              </span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 查看商品详细信息 -->
      <el-dialog title="商品详情" :visible.sync="infodialogTableVisible" class="info_dialog">
        <div class="div-center">
          <el-row class="el-row-top">
            <el-col :span="6">标题:</el-col>
            <el-col :span="12"></el-col>
          </el-row>
          <el-row class="el-row-top">
            <el-col :span="6">价格:</el-col>
            <el-col :span="12"></el-col>
          </el-row>
          <el-row class="el-row-top">
            <el-col :span="6">销量:</el-col>
            <el-col :span="12"></el-col>
          </el-row>
          <el-row class="el-row-top">
            <el-col :span="6">商品状态：</el-col>
            <el-col :span="12"></el-col>
          </el-row>
          <el-row class="el-row-top">
            <el-col :span="6">商品所属的叶子类目 id：</el-col>
            <el-col :span="12">{{infoid}}</el-col>
          </el-row>
          <el-row class="el-row-top">
            <el-col :span="6">支持会员打折:</el-col>
            <el-col :span="12"></el-col>
          </el-row>
          <el-row class="el-row-top">
            <el-col :span="6">是否有发票:</el-col>
            <el-col :span="12"></el-col>
          </el-row>
          <el-row class="el-row-top">
            <el-col :span="6">是否有保修:</el-col>
            <el-col :span="12"></el-col>
          </el-row>
          <el-row class="el-row-top">
            <el-col :span="6">是否已关联:</el-col>
            <el-col :span="12"></el-col>
          </el-row>
          <el-row class="el-row-top">
            <el-col :span="6">虚拟商品的状态:</el-col>
            <el-col :span="12"></el-col>
          </el-row>
          <el-row class="el-row-top">
            <el-col :span="6">上架时间:</el-col>
            <el-col :span="12"></el-col>
          </el-row>
          <el-row class="el-row-top">
            <el-col :span="6">下架时间:</el-col>
            <el-col :span="12"></el-col>
          </el-row>
          <el-row class="el-row-top">
            <el-col :span="6">修改时间:</el-col>
            <el-col :span="12"></el-col>
          </el-row>
          <el-row class="el-row-top">
            <el-col :span="6">上次同步时间:</el-col>
            <el-col :span="12"></el-col>
          </el-row>
        </div>
      </el-dialog>
      <!-- 查看映射关系 -->
      <el-dialog title="映射关系" :visible.sync="mapTableVisible" v-dialogDrag>
        <el-table :data="materielData" size="medium" max-height="400">
          <el-table-column align="center" property="materiel_type" label="类别"></el-table-column>
          <el-table-column align="center" property="materiel_no" label="编号"></el-table-column>
          <el-table-column align="center" property="materiel_state" label="状态"></el-table-column>
          <el-table-column align="center" property="materiel_name" label="名称"></el-table-column>
          <el-table-column align="center" property="materiel_spec" label="规格" width="120"></el-table-column>
          <el-table-column align="center" property="materiel_unit" label="单位"></el-table-column>
          <el-table-column align="center" property="materiel_user" label="创建人"></el-table-column>
          <el-table-column align="center" property="materiel_time" label="创建时间"></el-table-column>
        </el-table>
      </el-dialog>
      <el-pagination
        key="2"
        class="paging"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalpro"
      ></el-pagination>
    </div>
    <!-- <el-button class="btn" style="top:10px;left:600px" type="success" @click="test">点击我</el-button> -->
  </div>
</template>

<script>
import http from "@/assets/js/http";
import config from "@/assets/js/config.js";
import _g from "@/assets/js/global";
import { Carousel, CarouselItem } from "element-ui";
import { MessageBox } from "element-ui";
import { constants } from 'zlib';
import { connect } from 'net';
Vue.use(Carousel);
Vue.use(CarouselItem);
export default {
  components: {},
  data() {
    return {
      infoid: "",
      typeData: [],
      typeAllDate: [],
      materielShow: true,
      defaultExpandedKeys: [0],
      dialogTableVisible: false, //打开物料关联
      mapTableVisible: false,
      infodialogTableVisible: false,
      formLabelWidth: "120px",
      selection: [],
      mtableData: [
        {
          //materiel_num:1,
          materiel_type: "23423",
          materiel_no: "231241",
          materiel_state: "1231241",
          materiel_name: "124121",
          materiel_spec: "124121",
          materiel_unit: "121241",
          materiel_user: "125153",
          materiel_time: "12314",
          materiel_shelves: "12141"
        },
        {
          materiel_type: "23423",
          materiel_no: "231241",
          materiel_state: "1231241",
          materiel_name: "124121",
          materiel_spec: "124121",
          materiel_unit: "121241",
          materiel_user: "125153",
          materiel_time: "12314",
          materiel_shelves: "12141"
        },
        {
          materiel_type: "23423",
          materiel_no: "231241",
          materiel_state: "1231241",
          materiel_name: "124121",
          materiel_spec: "124121",
          materiel_unit: "121241",
          materiel_user: "125153",
          materiel_time: "12314",
          materiel_shelves: "12141"
        },
        {
          materiel_type: "23423",
          materiel_no: "231241",
          materiel_state: "1231241",
          materiel_name: "124121",
          materiel_spec: "124121",
          materiel_unit: "121241",
          materiel_user: "125153",
          materiel_time: "12314",
          materiel_shelves: "12141"
        },
        {
          materiel_type: "23423",
          materiel_no: "231241",
          materiel_state: "1231241",
          materiel_name: "124121",
          materiel_spec: "124121",
          materiel_unit: "121241",
          materiel_user: "125153",
          materiel_time: "12314",
          materiel_shelves: "12141"
        },
        {
          materiel_type: "23423",
          materiel_no: "231241",
          materiel_state: "1231241",
          materiel_name: "124121",
          materiel_spec: "124121",
          materiel_unit: "121241",
          materiel_user: "125153",
          materiel_time: "12314",
          materiel_shelves: "12141"
        },
        {
          materiel_type: "23423",
          materiel_no: "231241",
          materiel_state: "1231241",
          materiel_name: "124121",
          materiel_spec: "124121",
          materiel_unit: "121241",
          materiel_user: "125153",
          materiel_time: "12314",
          materiel_shelves: "12141"
        },
        {
          materiel_type: "23423",
          materiel_no: "231241",
          materiel_state: "1231241",
          materiel_name: "124121",
          materiel_spec: "124121",
          materiel_unit: "121241",
          materiel_user: "125153",
          materiel_time: "12314",
          materiel_shelves: "12141"
        },
        {
          materiel_type: "23423",
          materiel_no: "231241",
          materiel_state: "1231241",
          materiel_name: "124121",
          materiel_spec: "124121",
          materiel_unit: "121241",
          materiel_user: "125153",
          materiel_time: "12314",
          materiel_shelves: "12141"
        },
        {
          materiel_type: "23423",
          materiel_no: "231241",
          materiel_state: "1231241",
          materiel_name: "124121",
          materiel_spec: "124121",
          materiel_unit: "121241",
          materiel_user: "125153",
          materiel_time: "12314",
          materiel_shelves: "12141"
        }
      ],
      tableData: [
        {
          pro_skuid: 12313,
          pro_skuname: "skuname",
          pro_title: "上海信测",
          pro_color: "灰色",
          pro_status: "出售中",
          pro_proid: 1233,
          pro_price: "400元",
          pro_time: "2019-09-12",
          pro_map: "是"
        },
        {
          pro_skuid: 12313,
          pro_skuname: "skuname",
          pro_title: "上海信测",
          pro_color: "灰色",
          pro_status: "出售中",
          pro_proid: 444,
          pro_price: "400元",
          pro_time: "2019-09-12",
          pro_map: "否"
        },
        {
          pro_skuid: 12313,
          pro_skuname: "skuname",
          pro_title: "上海信测",
          pro_color: "灰色",
          pro_status: "未上架",
          pro_proid: 234,
          pro_price: "400元",
          pro_time: "2019-09-12",
          pro_map: "否"
        }
      ],
      detailSize: [],
      pageSizes: [10, 20, 50], //产品每页条数选择数组
      pageSize: 10, //产品每页条数
      totalpro: "", //产品总数
      currentPage: 1, //产品当前页码
      keywords: "", //产品搜索关键字
      // materielData: [],
      currentType: 0, //当前物料类别
      materielSizes: [20, 50, 100], //物料每页条数选择数组
      materielSize: 20, //物料每页条数
      totalMateriel: "", //物料总数
      materielPage: 1, //物料当前页码
      materielkeywords: "", //物料搜索关键字
      tableHeight:
        window.screen.availHeight -
        (window.outerHeight - window.innerHeight + 220) -
        77
    };
  },
  computed: {},

  methods: {
    saveQuit() {
      this.dialogTableVisible = false;
    },
    getClass(str) {
      let colorArr = [];
      switch (str) {
        case "是":
        case "出售中":
          colorArr.push("pro_yes");
          break;
        case "否":
        case "未上架":
          colorArr.push("pro_no");
          break;
      }
      return colorArr;
    },
    getRowKeys(row) {
      return row.id;
    },
    //编辑sku名称
    open(skuid, skuname) {
      MessageBox.prompt("请输入SKU名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValue: skuname
      })
        .then(({ value }) => {
          this.$message({
            type: "success",
            message: "成功"
          });
          this.updateSkuname(skuid, value);
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "取消输入"
          // });
        });
    },
    //查看商品详情
    getCommodityDetail(id) {
      this.infodialogTableVisible = true;
      this.infoid = id;
    },
    //更新sku名称
    updateSkuname(id, value) {
      let data = {
        skuName: value,
        skuId: id,
        codeId: "C00003"
      };
      this.apiPost(config.javaServerUrl, data).then(res => {
        this.getProduct();
      });
    },
    //获取物料类别
    getTypeList() {
      this.apiPost("/materiel/type/all", "").then(res => {
        let typeAllDate = {};
        typeAllDate.name = "全部";
        typeAllDate.label = "全部";
        typeAllDate.id = 0;
        typeAllDate.value = 0;
        typeAllDate.parent_id = 0;
        typeAllDate.path = "-";
        typeAllDate.children = res.data;
        this.typeAllDate = [typeAllDate];
        this.typeData = res.data;
        //this.typeNameList = res.list;
      });
    },
    //打开关联物理选择框
    addmap() {
      this.dialogTableVisible = true;
      this.getTypeList();
      this.getMateriel();
    },
    closemap() {
      this.dialogTableVisible = false;
    },
    selectionChange(selection) {
      this.selection = selection;
    },
    //修改产品每页条数
    handleSizeChange(size) {
      let tmpSize = this.pageSize;
      if (tmpSize > this.totalpro && size > this.totalpro) {
        this.pageSize = size;
        return;
      }
      this.pageSize = size;
      this.getProduct();
    },
    //修改物料每页条数
    handleMaterielPage(size) {
      let tmpSize = this.materielSize;
      if (tmpSize > this.totalMateriel && size > this.totalMateriel) {
        this.materielSize = size;
        return;
      }
      this.materielSize = size;
      this.getMateriel();
    },
    //修改产品页数
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getProduct();
    },
    //修改物料页数
    handleMaterielChange(page) {
      this.materielPage = page;
      this.getMateriel();
    },
    //刷新商品
    refreshCom() {
      this.getProduct();
      _g.toastMsg("success", "成功刷新！");
    },
    //搜索商品
    searchCom() {
      // let data = {};
      // this.currentPage = 1;
      // data.keywords = this.keywords;
      // console.log(data);
      // if (this.keywords) {
      //   let queryParams = {};
      //   queryParams.title = this.keywords;
      // }
      this.getProduct();
    },
    //单击类别事件
    nodeClick(data) {
      let pId = [];
      if (data.path.length > 1) {
        let path = data.path.substr(1, data.path.length - 2);
        let key = 0;
        path = path.split("-");
        for (let value of path) {
          pId[key] = Number(value);
          key++;
        }
      }
      pId.push(data.id);
      this.currentPage = 1;
      this.currentType = data.id;
      this.getMateriel();
    },
    //点击数量
    // changeNum(id, val) {
    //   this.detailSize.map(v => {
    //     if (id === v.id) {
    //       this.$set(v, "num", 0);
    //       v.final = v.default + val;
    //     }
    //   });
    // },
    //获取产品详情
    getProduct() {
      //this.getRowKeys();
      const that = this;
      let tableData = [];
      let data = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        queryParams: {
          title: "",
          isLink: "",
          approveStatus: ""
        },
        codeId: "C00001"
      };
      //console.log(this.keywords);
      if (this.keywords != "") {
        data.queryParams.title = this.keywords;
      }
      //_g.showLoading("加载中");
      this.apiPost(config.javaServerUrl, data).then(res => {
        //_g.showLoading().close();
        if (typeof res === "string") {
          res = JSON.parse(res);
        }
        //console.log(res);
        for (let com of res.data.commodits) {
          tableData.push({
            pro_skuid: com.skuId,
            pro_skuname: com.skuName,
            pro_title: com.title,
            pro_color: com.propertiesName,
            pro_status: that.getstatus(com.approveStatus),
            pro_proid: com.numIid,
            pro_price: that.newPrice(com.price),
            pro_time: that.formatDate(com.created),
            pro_salesum: com.soldQuantity,
            pro_map: that.isLink(com.isLink)
          });
        }

        that.tableData = tableData;
        this.totalpro = res.data.totalRecord;
      });
    },
    //根据ID渲染类别
    // getRenderValue(field) {
    //   if (field == "materiel_type_id") {
    //     if (name.type) {
    //       return name.type.fullType;
    //     }
    //   }
    // },
    //获取物料详情
    getMateriel() {
      //const that = this;
      let mtableData = [];
      let data = {
        id_delete: 0,
        type: this.currentType,
        pageSize: this.materielSize, //每页大小
        page: this.materielPage, //第几页
        // sortColumn: this.sortColumn,
        // sortDirection: this.sortDirection,
        url: "/Materiel/list"
      };
      if (this.materielkeywords != "") {
        data.keywords = this.materielkeywords;
      }
      this.apiPost("materiel/index/Materiel/list", data).then(res => {
        // for (let index in res.data) {
        //   // mtableData.push({
        //   //   materiel_type_id: fullType.skuId,
        //   // })
        //   console.log(res.data[index].type);
        // }
        //console.log(res.data[0].type.fullType);
        //this.mtableData.materiel_type_id = res.data.type.name;
        
        this.mtableData = res.data;
        this.mtableData.forEach(element => {
          
          element.materiel_num=1;
        });
        console.log(this.mtableData)
        // mtableData.push({

        // })
        //console.log(this.mtableData);
        this.totalMateriel = res.count;
      });
    },
    //查看映射关系
    lookover(index, row) {
      console.log(index, row);
      this.mapTableVisible = true;
    },
    //关闭映射表
    closeover() {
      this.mapTableVisible = false;
    },
    //处理状态
    getstatus(type) {
      let pro_status = "";
      if (type === "onsale") {
        return (pro_status = "出售中");
      } else {
        return (pro_status = "未上架");
      }
    },
    //处理价格
    newPrice(price) {
      return (this.tableData.pro_price = `￥${(price / 100).toFixed(2)}元`);
    },
    //处理是否关联
    isLink(type) {
      switch (type) {
        case 0:
          return "已关联";
          break;
        case 1:
          return "未关联";
          break;
      }
    },
    //处理时间
    formatDate(date) {
      let d = new Date(date),
        year = d.getFullYear(),
        month = d.getMonth() + 1,
        day = d.getDate(),
        hour = d.getHours(),
        minutes = d.getMinutes(),
        seconds = d.getSeconds();
      return (
        year +
        "-" +
        this.getNum(month) +
        "-" +
        this.getNum(day) +
        " " +
        this.getNum(hour) +
        ":" +
        this.getNum(minutes) +
        ":" +
        this.getNum(seconds)
      );
    },
    getNum(n) {
      return n > 10 ? n : "0" + n;
    },
    getFieldList: function() {
      let data = {};
      data.url = this.$route.path;
      this.apiPost("/materiel/field/getList", data).then(res => {
        if (res.code == 200) {
          this.fieldList = res.field;
          this.fieldShow = res.fieldShow;
          this.searchField = res.searchField;
        } else {
          _g.toastMsg("error", res.message);
        }
      });
    },
    //获取物料类别
    getTypeList: function() {
      this.apiPost("/materiel/type/all", "").then(res => {
        let typeAllDate = {};
        typeAllDate.name = "全部";
        typeAllDate.label = "全部";
        typeAllDate.id = 0;
        typeAllDate.value = 0;
        typeAllDate.parent_id = 0;
        typeAllDate.path = "-";
        typeAllDate.children = res.data;
        this.typeAllDate = [typeAllDate];
        this.typeData = res.data;
        //this.typeNameList = res.list;
      });
    }
  },

  mounted: function() {
    this.getProduct();
  },

  mixins: [http],
  watch: {}
};
</script>
<style  scoped>
.el-table__body tr:hover > td {
  background-color: initial !important;
}
.btn {
  position: absolute;
}
.header {
  display: flex;
  width: 98%;
  margin: 20px auto 0;
}
.leftbtn {
  max-width: 1000px;
}
.rightbtn {
  max-width: 200px;
}
.tmail {
  max-width: 98%;
  height: auto;
  margin: 20px auto 0;
}
.operatBtnMiddle {
  display: inline-block;
  color: white;
  background-color: #f39c00;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border: none;
  font-size: 14px;
  cursor: pointer;
  margin-right: 5px;
  padding: 0 10px;
  border-radius: 0;
}
.operatBtnMiddle:hover,
.operatBtnBig:hover {
  background-color: #f5b466;
}
.paging {
  position: fixed;
  bottom: 0;
  z-index: 999;
  width: 97.4%;
  background-color: #e6eef8;
  border-left: 1px solid #d1d1d1;
  border-right: 1px solid #d1d1d1;
  border-bottom: 1px solid #d1d1d1;
}
.diglog_btn {
  width: 20%;
  display: flex;
  margin: 20px 700px 0;
  justify-content: space-around;
}
.meteriel_btn {
  width: 50%;
  margin: -10px auto 10px;
}
.materiel_paging {
  margin-top: 10px;
}
.pro_info {
  cursor: pointer;
}
.info_dialog {
  max-width: 4100px;
}
.el-dialog {
  width: 80% !important;
}
.mdialog {
  height: 580px;
}
.left-sider {
  /* border:1px solid red; */
  height: 100%;
  overflow: hidden;
}
.right-content {
  position: relative;
  height: 90%;
}

.mblock {
  width: 99.8%;
  height: 35px;
  padding-top: 6px;
  position: absolute;
  bottom: 0;
  background-color: #e6eef8;
  border-left: 1px solid #d1d1d1;
  border-right: 1px solid #d1d1d1;
  border-bottom: 1px solid #d1d1d1;
  z-index: 999;
}
.mbtn {
  display: flex;
  flex-direction: row-reverse;
  padding: 20px;
}
.mbtn button:nth-child(1) {
  margin-right: 170px;
  margin-left: 40px;
}
.pro_yes {
  color: green;
}
.pro_no {
  color: red;
}
</style>